<div class="tab-pane Configuration-container" id="configuration_edit">

    <div class="row Form-tabRow">
        <div class="col-lg-12">
            <div class="Form-tabHolder">
                <div ng-repeat="opt in authVm.dropdownOptions"
                        class="Form-tab"
                        ng-click="authVm.activeForm(opt.value)"
                        ng-class="{'is-selected': authVm.activeTab === opt.value }"
                        translate>
                    {{opt.label}}
                </div>
            </div>
        </div>
    </div>

    <div class="Form-nav--dropdownContainer" ng-show="authVm.activeTab === 'ldap'">
        <div class="Form-nav--dropdownLabel" translate>LDAP Server</div>
        <div class="Form-nav--dropdown">
            <select
                id="configure-ldap-dropdown"
                class="form-control"
                ng-model="authVm.ldapDropdownValue"
                ng-options="opt.value as opt.label for opt in authVm.ldapDropdownOptions"
                ng-change="authVm.activeForm('ldap')">
            </select>
        </div>
    </div>

    <div class="Form-nav--dropdownContainer" ng-show="authVm.activeTab === 'github'">
        <div class="Form-nav--dropdownLabel" translate>GitHub Category</div>
        <div class="Form-nav--dropdown">
            <select
                id="configure-github-dropdown"
                class="form-control"
                ng-model="authVm.githubDropdownValue"
                ng-options="opt.value as opt.label for opt in authVm.githubDropdownOptions"
                ng-change="authVm.activeForm('github')">
            </select>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <div ng-show="authVm.activeAuthForm === 'azure'">
                <div id="auth-azure-form"></div>
            </div>

            <div ng-show="authVm.activeAuthForm === 'github'">
                <div id="auth-github-form"></div>
            </div>

            <div ng-show="authVm.activeAuthForm === 'github_org'">
                <div id="auth-github-org-form"></div>
            </div>

            <div ng-show="authVm.activeAuthForm === 'github_team'">
                <div id="auth-github-team-form"></div>
            </div>

            <div ng-show="authVm.activeAuthForm === 'google_oauth'">
                <div id="auth-google-form"></div>
            </div>

            <div ng-show="authVm.activeAuthForm === 'ldap'">
                <div id="auth-ldap-form"></div>
            </div>

            <div ng-show="authVm.activeAuthForm === 'ldap1'">
                <div id="auth-ldap1-form"></div>
            </div>

            <div ng-show="authVm.activeAuthForm === 'ldap2'">
                <div id="auth-ldap2-form"></div>
            </div>

            <div ng-show="authVm.activeAuthForm === 'ldap3'">
                <div id="auth-ldap3-form"></div>
            </div>

            <div ng-show="authVm.activeAuthForm === 'ldap4'">
                <div id="auth-ldap4-form"></div>
            </div>

            <div ng-show="authVm.activeAuthForm === 'ldap5'">
                <div id="auth-ldap5-form"></div>
            </div>

            <div ng-show="authVm.activeAuthForm === 'radius'">
                <div id="auth-radius-form"></div>
            </div>

            <div ng-show="authVm.activeAuthForm === 'tacacs'">
                <div id="auth-tacacs-form"></div>
            </div>

            <div ng-show="authVm.activeAuthForm === 'saml'">
                <div id="auth-saml-form"></div>
            </div>
        </div>
    </div>
</div>
